<template>
    <div 
    class="comment-input"
    :class="size"
    >
        <div class="release">
            <el-button 
            class="btn-release"
            :disabled="!value"
            @click="submitHandler"
            >
                发布
            </el-button>
        </div>

        <div class="input">
            <el-input 
                v-model="value" 
                :placeholder="nickname ? placeholder : '请先登录'"
                :disabled="!nickname"
                maxlength="200"
                show-word-limit
                @input="checkLoginHandler"
            ></el-input>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
    props: {
        placeholder: {
            type: String,
            default: '欢迎留言讨论',
        },
        size: {
            type: String,
            default: 'normal'
        },
        parentguid: {
            type: String,
            default: ''
        },
        objecttype: {
            type: String,
            default: ''
        },
        objectguid: {
            type: String,
            default: ''
        },
    },
    data () {
        return {
            value: '',
        };
    },
    computed: {
        ...mapGetters({
            nickname: 'userinfo/getNickname',
        }),
    },
    methods: {
        submitHandler() {
            if(this.checkLoginHandler()) {
                this.$post(`${this.$store.state.api.tbUrl}/comment/form.json`, {
                    objecttype: this.objecttype,
                    objectguid: this.objectguid,
                    parentguid: this.parentguid,
                    content: this.value,
                }, data => {
                    this.value = '';
                    this.$emit('submit', data);
                });
            }
        },
        checkLoginHandler() {
            if (this.nickname) {
                return true;
            }

            showMsgBox('评论前请先登录!', 'info', () => {
                this.goto('/login');
            });

            return false;
        },
    },
}
</script>

<style lang="scss" scoped>
    @import '@css/var.scss';
    
    .comment-input{
        .input{
            margin-right: 94px;

            ::v-deep {
                .el-input__inner {
                    // background: #f4f4f4;
                    padding-right: 64px;
                }

                .el-input__count-inner{
                    background: transparent;
                }
            }
        }

        .release{
            float: right;
            margin-left: -94px;

            .btn-release {
                line-height: 1em;
            }
        }

        &.normal{
            .input{
                ::v-deep {
                    .el-input__inner {
                        line-height: 46px;
                        height: 46px;
                    }
                }
            }

            .release{
                .btn-release {
                    padding: 15px 26px;
                }
            }
        }

        &.small{
            .input{
                ::v-deep {
                    .el-input__inner {
                        line-height: 40px;
                        height: 40px;
                    }
                }
            }

            .release{
                .btn-release {
                    padding: 12px 26px;
                }
            }
        }

        .btn-release:hover{
            background: $primaryColor;
            color: white;
        }
    }
</style>